<!DOCTYPE html>
<html>
<head>
	<title>Password Holder</title>
	
	<meta name="viewport" content="width=device-width, initial-scale=1"> 
	
	<!-- jQuery/jQuery Mobile -->
	<link rel="stylesheet" href="https://ajax.aspnetcdn.com/ajax/jquery.mobile/1.0/jquery.mobile-1.0.min.css" />
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
	<script src="https://ajax.aspnetcdn.com/ajax/jquery.mobile/1.0/jquery.mobile-1.0.min.js"></script>

	<!-- Backend JS -->
	<script src="static/pwdholder.js"></script>
	
	<!-- UI JS -->
	<script type="text/javascript">
		$(document).ready(function() {
			$("#login_form").submit(function() {
				PwdHolder.login(
					$("#master_user").val(),
					$("#master_pw").val(),
					function(success, data) {
						if(success)
							$.mobile.changePage("#get_password");
						else
							alert(data.message); // TBD: prettier
					});
				return false;
			});
	
			$("#set_form").submit(function() {
				PwdHolder.set(
					$("#site_url_set").val(),
					$("#site_user_set").val(),
					$("#site_pw_set").val(),
					function(success, data) {
						if(success) {
							// Immediately make call out to get the new values
							$("#site_url_get").val($("#site_url_set").val());
							$("#get_form").submit();
							$.mobile.changePage("#get_password", { reverse: true });
							
							// Clear old set form
							$("#site_url_set").val('');
							$("#site_user_set").val('');
							$("#site_pw_set").val('');
						}
						else if(data.login_needed)
							$.mobile.changePage("#login");
						else
							alert(data.message); // TBD: prettier
					});
				return false;
			});
	
			$("#get_form").submit(function() {
				// Clear get form
				$("#site_user_get_result").val('');
				$("#site_pw_get_result").val('');
				
				// Don't bother if there's nothing to search for
				if($("#site_url_get").val() == '')
					return false;
				
				PwdHolder.get(
					$("#site_url_get").val(),
					function(success, data) {
						if(success) {
							$("#site_user_get_result").val(data.site_user);
							$("#site_pw_get_result").val(data.site_pw);
						}
						else if(data.login_needed)
							$.mobile.changePage("#login");
						else if(data.no_password)
							alert('No password found for this site');
						else
							alert(data.message);
					});
				return false;
			});
	
			$("#generate_form").submit(function() {
				PwdHolder.generate(
					$("#generate_min_len").val(),
					$("#generate_max_len").val(),
					$("#generate_include_punc").val(),
					function(success, data) {
						if(success)
							$("#generate_pw_result").val(data.password);
						else
							alert(data.message);
					});
				return false;
			});
	
			$("a[href=#login]").click(function(event) {
				PwdHolder.logout(function() {
					$.mobile.changePage("#login");
				});
		
				event.preventDefault();
			});
	
			// Choose starting page
			PwdHolder.checkLogin(function(loggedIn, data) {
				if(loggedIn) {
					// Logged in! Go to requested page if possible
					if($.mobile.activePage.attr('id') == "login")
						$.mobile.changePage("#get_password");
				}
				else {
					// Not logged in
					$.mobile.changePage("#login");
				}
			});
		});
	</script>
</head>
<body>

<div id="login" data-role="page">
	<div data-role="header">
		<h1>Login</h1>
	</div>
	
	<div data-role="content">
		<form method="GET" action="login" id="login_form">
			<div data-role="fieldcontain">
				<label for="master_user">User</label>
				<input type="text" id="master_user" name="user" value="" placeholder="Username" />
			</div>
			
			<div data-role="fieldcontain">
				<label for="master_pw">Password</label>
				<input type="password" id="master_pw" name="pw" value="" />
			</div>
			
			<div data-role="fieldcontain" class="ui-hide-label">
				<label for="login_submit">Login</label>
				<input type="submit" id="login_submit" value="Login" />
			</div>
		</form>
	</div>
</div>

<div id="get_password" data-role="page">
	<div data-role="header" data-position="fixed">
		<h1>Get Password</h1>
		<a href="#login" data-direction="reverse" class="ui-btn-right">Logout</a>
		
		<div data-role="navbar" data-iconpos="left">
			<ul>
				<li><a href="#get_password" data-icon="search" class="ui-btn-active">Get</a></li>
				<li><a href="#set_password" data-icon="plus">Set</a></li>
				<li><a href="#generate" data-icon="grid">Generate</a></li>
			</ul>
		</div>
	</div>
	
	<div data-role="content">
		<!-- Search box -->
		<form method="GET" action="get_password" id="get_form">
			<div data-role="fieldcontain">
				<label for="site_url_get">Site</label>
				<input type="search" id="site_url_get" name="site" value="" placeholder="URL" data-inline="true" />
				<label for="get_submit" class="ui-hidden-accessible">Get Password</label>
				<input type="submit" id="get_submit" value="Get" data-inline="true" />
			</div>
		</form>
		
		<!-- Results -->		
		<div data-role="fieldcontain">
			<label for="site_user_get_result">User</label>
			<input type="text" id="site_user_get_result" value="" disabled />
		</div>
		
		<div data-role="fieldcontain">
			<label for="site_pw_get_result">Password</label>
			<input type="text" id="site_pw_get_result" value="" disabled />
		</div>
	</div> 
</div>

<div id="generate" data-role="page">
	<div data-role="header" data-position="fixed">
		<h1>Generate Password</h1>
		<a href="#login" data-direction="reverse" class="ui-btn-right">Logout</a>
		
		<div data-role="navbar" data-iconpos="left">
			<ul>
				<li><a href="#get_password" data-icon="search" data-direction="reverse">Get</a></li>
				<li><a href="#set_password" data-icon="plus" data-direction="reverse">Set</a></li>
				<li><a href="#generate" data-icon="grid" class="ui-btn-active">Generate</a></li>
			</ul>
		</div>
	</div>
	
	<div data-role="content">
		<!-- Search box -->
		<form method="GET" action="generate" id="generate_form">
			<div data-role="fieldcontain">
				<label for="generate_min_len">Minimum Length</label>
				<input type="range" id="generate_min_len" min="1" max="100" value="12" name="min_len" />
			</div>
			
			<div data-role="fieldcontain">
				<label for="generate_max_len">Maximum Length</label>
				<input type="range" id="generate_max_len" min="1" max="100" value="15" name="max_len" />
			</div>
			
			<div data-role="fieldcontain">
				<label for="generate_include_punc">Include Punctuation</label>
				<select id="generate_include_punc" data-role="slider">
					<option value="">Off</option>
					<option value="!@#$%^&*()?">On</option>
				</select>
			</div>
			
			<div data-role="fieldcontain">
				<label for="generate_submit" class="ui-hidden-accessible">Generate Password</label>
				<input type="submit" id="generate_submit" value="Generate" />
			</div>
		</form>
		
		<!-- Results -->		
		<div data-role="fieldcontain">
			<label for="generated_pw">Password</label>
			<input type="text" id="generate_pw_result" value="" disabled />
		</div>
	</div> 
</div>

<div id="set_password" data-role="page">
	<div data-role="header" data-position="fixed">
		<h1>Set Password</h1>
		<a href="#login" data-direction="reverse" class="ui-btn-right">Logout</a>
		
		<div data-role="navbar" data-iconpos="left">
			<ul>
				<li><a href="#get_password" data-icon="search" data-direction="reverse">Get</a></li>
				<li><a href="#set_password" data-icon="plus" class="ui-btn-active">Set</a></li>
				<li><a href="#generate" data-icon="grid">Generate</a></li>
			</ul>
		</div>
	</div> 
	
	<div data-role="content">
		<form method="GET" action="set_password" id="set_form">
			<div data-role="fieldcontain">
				<label for="site_url_set">Site</label>
				<input type="text" id="site_url_set" name="site" value="" placeholder="URL" />
			</div>
			
			<div data-role="fieldcontain">
				<label for="site_user_set">User</label>
				<input type="text" id="site_user_set" name="site_user" value="" placeholder="Site Username" />
			</div>
			
			<div data-role="fieldcontain">
				<label for="site_pw_set">Password</label>
				<input type="text" id="site_pw_set" name="site_pw" value="" placeholder="Site Password" />
			</div>
			
			<div data-role="fieldcontain" class="ui-hide-label">
				<label for="set_submit">Save Password</label>
				<input type="submit" id="set_submit" value="Save" />
			</div>
		</form>
	</div>
</div>

</body>
</html>

